import { Typography, Upload, message } from 'antd';
import { UploadChangeParam, UploadFile, UploadProps } from 'antd/es/upload';
import { useEffect, useState } from 'react';

import { fBytes } from '@/utils/format-number';

import { Iconify } from '../icon';

import { StyledUploadAvatar } from './styles';
import { beforeAvatarUpload } from './utils';

interface Props extends UploadProps {
  defaultAvatar?: string;
  helperText?: React.ReactElement | string;
  onUploadSuccess?: (success: string) => void;
  title?: string;
}

export function UploadAvatar({
  helperText,
  defaultAvatar,
  onUploadSuccess,
  title,
  ...other
}: Props) {
  const [imageUrl, setImageUrl] = useState<string>();
  const [isHover, setIsHover] = useState(false);
  // const DNA = import.meta.env.VITE_DNA;//设置头像地址
  useEffect(() => {
    if (defaultAvatar) {
      setImageUrl(defaultAvatar);
    }
  }, [defaultAvatar]);
  const handelHover = (hover: boolean) => {
    setIsHover(hover);
  };
  const handleChange: UploadProps['onChange'] = async (info: UploadChangeParam<UploadFile>) => {
    if (info.file.status === 'uploading') {
      return;
    }

    if (info.file.status === 'done') {
      message.success('上传成功！');
      setImageUrl(info.file.response.success);
      onUploadSuccess?.(info.file.response.success); // 传递 success 给父组件
    }

    if (info.file.status === 'error') {
      message.error('上传失败，请重试！');
    }
  };

  const renderPreview = <img src={imageUrl} alt="" className="absolute rounded-full" />;

  const renderPlaceholder = (
    <div
      style={{
        backgroundColor: !imageUrl || isHover ? 'rgba(22, 28, 36, 0.64)' : 'transparent',
        color: '#fff',
      }}
      className="absolute z-10 flex h-full w-full flex-col items-center justify-center"
    >
      <Iconify icon="solar:camera-add-bold" size={32} />
      <div className="mt-1 text-xs">{title || '上传头像'}</div>
    </div>
  );

  const renderContent = (
    <div
      className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-full"
      onMouseEnter={() => handelHover(true)}
      onMouseLeave={() => handelHover(false)}
    >
      {imageUrl ? renderPreview : null}
      {!imageUrl || isHover ? renderPlaceholder : null}
    </div>
  );

  const defaultHelperText = (
    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
      文件格式 *.jpeg, *.jpg, *.png
      <br /> 最大尺寸 {fBytes(3145728)}
    </Typography.Text>
  );

  const renderHelpText = <div className="text-center">{helperText || defaultHelperText}</div>;

  return (
    <StyledUploadAvatar
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
      }}
    >
      <Upload
        name="file"
        action="/api/file/oss/upload" // 添加上传接口地址，API
        showUploadList={false}
        data={{ group: 'njg_avatar' }}
        listType="picture-card"
        className="avatar-uploader !flex items-center justify-center"
        {...other}
        beforeUpload={beforeAvatarUpload}
        onChange={handleChange}
      >
        {renderContent}
      </Upload>
      {renderHelpText}
    </StyledUploadAvatar>
  );
}
